<template>
  <div class="Recommend">
    <ul class="BannerList">
      <template v-if="BannerList">
        <transition-group :name="direct" tag="ul" @after-leave="afterEnd">
        <li v-for="(item,index) in BannerList" :key="index"  v-show="showIndex==index" ><img :src="item.imageUrl"/></li>
      </transition-group>
      </template>
    </ul>
    <ol class="yuan">
      <li v-for="item in BannerList.length" :key="item.id" @touchstart="changeImg(item)" :class="{active:showIndex == item-1}"></li>
    </ol>
    <ol class="lt">
      <li @click="left(showIndex)">&lt;</li>
      <li @click="right(showIndex)">&gt;</li>
    </ol>
    <BorderTitle>推荐歌单</BorderTitle>
    <ul class="recommendList">
        <ImgList v-for="item in recommendList" :key="item.id" :item='item'></ImgList>
    </ul>
    <Loading v-if="recommendList.length == 0"></Loading>
    <BorderTitle>最新音乐</BorderTitle>
    <Loading v-if="songList.length == 0"></Loading>
    <SongList :song='songList' @play='$emit("play",$event)'></SongList>
    <BorderTitle>推荐MV</BorderTitle>
    <ul class="MVlist">
        <Mv v-for="item in MvLIst" :key="item.id" :item='item' @pause="$emit('pause',$event)"></Mv>
    </ul>
  </div>
</template>
<script>
// 引入自定义组件
import BorderTitle from '../components/BorderTitle.vue'
import ImgList from '../components/ImgList'
import SongList from '../components/SongLIst'
import Loading from '../components/Loading'
import Mv from '../components/RecommendMv'
export default {
 
  name:'Recommend',
   data(){
    return{
      recommendList:[],
      songList:[],
      BannerList:[],
      MvLIst:[],
      showIndex:0,
      direct:"left",
      enterClass:"",
      leaveClass:"",
      isEnd:true,

      intervalID:null,
    }
  },
  created(){
    //  /Recommend.json 请求ajax的方式是本地的 json文件
    // 或者直接用 接口地址
    // 这里的json是来获取 推荐歌单 的
    this.$http.get('/personalized',{
      // 获取前六条记录
       params:{
        limit:6
      }}
    ).then(d =>{
      this.recommendList = d.data.result.slice(0,6)
    })
    // /personalized/newsong
    // /newsong.json
    this.$http.get('/personalized/newsong',{
      params:{
        limit:10
      }
    }).then(d=>{
      this.songList = d.data.result
    })
    // /personalized/banner
    // /banner.json
    this.$http.get('/banner').then(d=>{
      this.BannerList = d.data.banners
    })
    this.$http.get('/mv/first').then(d=>{
      this.MvLIst = d.data.data.slice(0,6);
      console.log(this.MvLIst);
    })
   },
    mounted(){
       this.startInterval();
    },
    beforeDestroy(){
        this.stopInterval();
    },
     methods:{
    changeImg(i){
      if(!this.isEnd || this.showIndex==i-1) return;
      if(i-1>this.showIndex){
          this.direct="right";
      }else{
          this.direct="left";
      }
      this.showIndex=i-1;
      this.isEnd=false;
    },
      afterEnd(){
        if(!this.isEnd) this.isEnd=true;
      },
      left(c){
        if(this.isEnd){
            if(c <= 0){
              c = this.BannerList.length ;
            }
            this.direct="left";
            this.isEnd = false;
            this.showIndex = c -1;
            setTimeout(() => {
              this.isEnd = true
            }, 800);
          }
      },
      right(d){
          if(this.isEnd){
            if(d >= this.BannerList.length-1){
              d = -1;
            }
            this.direct="right";
            this.isEnd = false;
            this.showIndex = d + 1;
          setTimeout(() => {
            this.isEnd = true;
          }, 800);
        }
      },
      startInterval(){
        this.intervalID=window.setInterval(()=>{
         this.showIndex +=1

         if(this.showIndex >= this.BannerList.length){
           this.showIndex = 0;
         }
        },5000)
      },
      stopInterval(){
        window.clearInterval(this.intervalID)
      }
  },
  components: { BorderTitle,ImgList, SongList,Loading,Mv},
}
</script>
<style lang="less" scoped>
.Recommend{
    width: 100%;
    position: relative;
  .BannerList{
    height: 200px;
    width: 100%;
    position: relative;
    overflow: hidden;
    @media screen and (min-width:576px) {
         height: 250px;
    }
    @media screen and (min-width:768px) {
        height: 300px;
    }
    @media only screen and (min-width:992px) {
        height: 350px;
    }
      li{
        position: absolute;
        top: 0;
        left: 0;
        width:100%;
        height: 100%;
      img{
         height: 100%;
         width: 100%;
      }
    }
  }
  .yuan{
      position: absolute;
      top:184px;
      display: flex;
      left: 50%;
      margin-left: -80px;
      left: 50%;
      @media screen and (min-width:576px) {
        top:232px
      }
      @media screen and (min-width:768px) {
          top: 283px
      }
      @media only screen and (min-width:992px) {
          top: 328px;
      }
      li{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
        margin-left: 5px;
        &.active{
           background-color: #EE6A22;
        }
      }
  }
  .lt{
    // position: relative;
    li{
      position: absolute;
      text-align: center;
      height: 30px;
      line-height: 30px;
      display: inline-block;
      width: 30px;
      color: #fff;
      border-radius: 50%;
      background-color: rgba(90, 89, 89,0.5);
      &:nth-child(1){
        top: 100px;
        left: 0px;
        transform: translateY(-50%);
         @media screen and (min-width:576px) {
            top:125px
        }
        @media screen and (min-width:768px) {
            top: 150px
        }
        @media only screen and (min-width:992px) {
            top: 175px;
        }
      }
      &:nth-child(2){
        top: 100px;
        right: 0px;
        transform: translateY(-50%);
        @media screen and (min-width:576px) {
             top:125px
        }
        @media screen and (min-width:768px) {
             top: 150px
        }
        @media only screen and (min-width:992px) {
             top: 175px;
        }
      }
    }
  }
  .recommendList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .MVlist{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
}




.left-enter{
    transform: translateX(-100%);
}
.left-enter-to,.left-leave{
    transform: translateX(0);
}
.left-leave-to{
    transform: translateX(100%);
}
.left-enter-active,.left-leave-active{
    transition: transform .5s;
}
.right-enter{
    transform: translateX(100%);
}
.right-enter-to,.right-leave{
    transform: translateX(0);
}
.right-leave-to{
    transform: translateX(-100%);
}
.right-enter-active,.right-leave-active{
    transition: transform .5s linear;
}

</style>